<template>
  <view class="task-details">
    <NavBar
      v-if="appInfoStore().isH5"
      title="任务详情"
      :backgroundColor="'#fff'"
    />
    <view
      class="task-details-contiainer"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="task-details-header">
        <view class="task-details-header-top">
          <view class="task-prompt">
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01r1bDie1S9wNXHwrHA_!!1034622205.png"
              alt=""
            />
            <!-- :style="{ color: taskStatusList[queryTaskData?.taskStatus]?.statusColor }" -->
            <text class="task-prompt-text">S级-突发紧急任务，请在短时间内进行处理 ~ </text>
          </view>
          <view class="task-details-title">
            <view class="task-details-title-text">{{ queryTaskData?.title }}</view>
          </view>
          <view class="task-details-header-right">
            <img
              :src="taskStatusList[queryTaskData?.taskStatus]?.img"
              alt=""
            />
          </view>
        </view>
        <view class="task-details-header-bottom">
          <view class="user-info-left">
            <text>发起人</text>
            <view class="user-name">
              <img
                :src="queryTaskData?.avatarUrl"
                alt=""
              />
              <view class="user-name-text">{{ queryTaskData?.nickName }}</view>
            </view>
          </view>
          <view class="time-info-right">
            <icon
              type="clock"
              size="20"
              color="#999999"
            />
            <text>{{ queryTaskData?.createdTime }}</text>
          </view>
        </view>
      </view>
      <view class="task-details-info">
        <view class="task-details-info-title">
          <i
            class="iconfont icon-renwuxinxi"
            style="color: #2578fd"
          ></i>
          <text>任务信息</text>
        </view>
        <view class="task-details-info-content">
          <view class="info-content-item">
            <view class="info-con-text">
              <text>计划时间</text>
              <text>{{ queryTaskData?.finishTime }}截止</text>
            </view>
            <view class="info-con-text">
              <text>执行人/部门</text>
              <nut-avatar-group
                zIndex="right"
                max-content=" "
                size="small"
              >
                <nut-avatar
                  v-for="(itm, idx) in queryTaskData?.executorNameList"
                  :key="idx"
                  size="small"
                >
                  <img
                    :src="itm.avatarUrls"
                    alt=""
                  />
                </nut-avatar>
              </nut-avatar-group>
              <view class="card-item-num">{{ queryTaskData?.executorNameList?.length }}人</view>
            </view>
            <view class="info-con-text">
              <text>协作人员</text>
              <nut-avatar-group
                zIndex="right"
                max-content=" "
                size="small"
              >
                <nut-avatar
                  v-for="(itm, idx) in queryTaskData?.collaboratorsNameList"
                  :key="idx"
                  size="small"
                >
                  <img
                    :src="itm.avatarUrls"
                    alt=""
                  />
                </nut-avatar>
              </nut-avatar-group>
              <view class="card-item-num">{{ queryTaskData?.collaboratorsNameList?.length }}人参与其中</view>
            </view>
          </view>
          <view class="description-content-item">
            <view class="description-title">
              <text>任务描述</text>
              <icon
                type="info"
                size="14"
                color="#ccc"
              />
            </view>
            <view class="description-content">
              <view class="description-content-text">
                <text> {{ queryTaskData?.content }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="other-info">
        <view class="other-info-title">
          <i
            class="iconfont icon-renwuxinxi"
            style="color: #2578fd"
          ></i>
          <text>其他信息</text>
        </view>
        <view class="other-info-content">
          <view class="other-info-content-item">
            <view class="other-content-title">
              <text>附件</text>
            </view>
            <view class="other-content-text">
              <uploads :path="queryTaskData?.filesList"> </uploads>
            </view>
          </view>
          <view class="other-info-content-item">
            <view class="other-content-title">
              <text>关联任务</text>
            </view>
            <view class="other-content-item">
              <view
                class="related-tasks2-box"
                v-for="item in relatedtasksSelectedList"
                :key="item"
              >
                <view class="related-tasks2">
                  <text>{{ item.title }}</text>
                </view>
                <view class="related-tasks3">
                  <view class="related-tasks3-left">
                    <text>负责人</text>
                    <view class="related-avatar">
                      <nut-avatar-group
                        max-count="3"
                        zIndex="right"
                        max-content=" "
                        size="small"
                      >
                        <nut-avatar
                          v-for="(itm, idx) in item.responsible"
                          :key="idx"
                          size="small"
                        >
                          <img
                            :src="itm.avatarUrl"
                            alt=""
                          />
                        </nut-avatar>
                      </nut-avatar-group>
                      <text
                        class="related-avatar-text"
                        v-if="item.responsible?.length == 1"
                        >{{ item.responsible[0]?.nickName }}</text
                      >
                      <text v-else>{{ item.responsible ? item.responsible?.length : 0 }}人负责</text>
                    </view>
                  </view>
                  <view class="related-tasks3-right">
                    <text>截止{{ item.finishTime?.substring(5, 10) }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="task-details-bottom">
        <view class="task-details-logo">
          <img
            src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
            alt=""
          />
        </view>
      </view>
      <view class="task-details-btn">
        <view class="task-details-btn-box">
          <view class="task-details-btn-left">
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01QItznG1S9wNYgbIxs_!!1034622205.png"
              alt=""
            />
            <text>有点疑惑？</text>
            <text>联系他</text>
          </view>
          <view class="task-details-btn-right">
            <nut-button
              color="#1E74FD"
              shape="round"
              size="small"
              @click="handleReceive"
            >
              <!-- <icon
                type="cancel"
                color="#999"
              /> -->
              <img
                src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01lJcTqk1S9wNSdCs9Q_!!1034622205.png"
                alt=""
              />
              接收任务
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { appInfoStore } from "@/stores/appInfo";
import NavBar from "@/components/navBar/index.vue";
import uploads from "@/components/uploads/index.vue";
import { queryTask, getSystemtaskList, getTaskReceiveEdit } from "@/api/index";
import { useRouter } from "@tarojs/taro";
import Taro from "@tarojs/taro";
const router = useRouter();
const checkbox6 = ref(false);
const queryTaskData = ref();
const relatedtasksSelectedList = ref([]); // 关联任务列表
const taskStatusList = ref([
  {
    img: "https://img.alicdn.com/imgextra/i4/1034622205/O1CN01Ysiq4F1S9wNx3isGv_!!1034622205.png", //待处理
    statusColor: "#0058E5",
    status: 0,
  },
  {
    img: "https://img.alicdn.com/imgextra/i1/1034622205/O1CN01rqRnUO1S9wNtQtIgx_!!1034622205.png", //进行中
    statusColor: "#d81e06",
    status: 1,
  },
  {
    img: "https://img.alicdn.com/imgextra/i1/1034622205/O1CN01JgmTVa1S9wNwJS0uC_!!1034622205.png", //已完成
    statusColor: "#009200",
    status: 2,
  },
  {
    img: "https://img.alicdn.com/imgextra/i4/1034622205/O1CN01DU4Wo11S9wNw1kguu_!!1034622205.png", //逾期
    statusColor: "#E87B00",
    status: 3,
  },
]); // 任务状态列表
onMounted(async () => {
  await getQueryTask();
  await handleTaskPermissionList();
});
// 关联所有任务获取列表
const handleTaskPermissionList = async () => {
  // meetingState: 2,
  let params = {};
  await getSystemtaskList(params).then(res => {
    let rows = res.rows;
    if (queryTaskData.value.parentTaskId) {
      relatedtasksSelectedList.value = rows.filter(i => i.parentTaskId == queryTaskData.value.parentTaskId);
    }
  });
};
// 接收/完成任务
const handleReceive = () => {
  let params = {
    taskId: queryTaskData.value.taskId,
    taskStatus: queryTaskData.value.taskStatus,
    userId: queryTaskData.value.userId,
  };
  getTaskReceiveEdit(params).then(res => {
    Taro.showToast({
      title: "操作成功",
      icon: "success",
      duration: 2000,
    });
    getQueryTask();
  });
};
// 查询回显任务数据
const getQueryTask = async () => {
  await queryTask(router.params.taskId).then(res => {
    queryTaskData.value = res.data;
    let filesList = [];
    res.data?.filesList?.forEach((item: any) => {
      filesList.push({
        url: item.files,
        name: item.name,
      });
    });
    // queryTaskData.value?.filesList = filesList;
    console.log(filesList, "queryTaskData?.filesList");
  });
};
</script>

<style lang="less">
@import "./index.less";
// @import "../../../../assets/css/index.css";
@import "@/assets/css/index.less";
</style>
